<template>
    <div class="preview-container" v-show="previewImgShow" style="z-index: 999">
        <el-image-viewer @close="closeImgViewer" :url-list="[imgUrl]"/>
    </div>
</template>

<script setup name="HPreviewImage">
import { ElImageViewer } from "element-plus"
const emit = defineEmits();
const { proxy } = getCurrentInstance()
const props = defineProps({
    show: {
        required: true,
        type: Boolean,
        default: () => false
    },
    imgUrl: {
        required: true,
        type: String,
        default: () => ''
    },
})

watch(() => props.show, (val) => {
    previewImgShow.value = val
})

const previewImgShow = computed({
    get(){
        return props.show
    },
    set(val){
        emit('update:show', val)
    }
})

function closeImgViewer() {
    previewImgShow.value = false
    console.log('closeImgViewer', previewImgShow.value)
    const m = (e) => {
        e.preventDefault()
    }
    document.body.style.overflow = 'auto';
    document.removeEventListener("touchmove", m, true)
}


</script>

<style lang="less" scoped>
.preview-container {

}
</style>
